<template>
  <div class="container">
    <div class="top-bar">
      <div class="top-bar__left">
        <div class="top-bar__left__title">
          <img src="/src/assets/image.png" alt="logo" />
        </div>
      </div>

      <div class="top-bar__right">
        <HomeOutlined />
        <div class="top-bar__right__setting">
          <a-dropdown>
            <template #overlay>
              <a-menu>
                <a-menu-item key="1" @click="showProfile">个人中心</a-menu-item>
              </a-menu>
            </template>
            <a-button type="text">
              <span>设置</span>
              <DownOutlined />
            </a-button>
          </a-dropdown>
        </div>
      </div>
    </div>

    <a-modal
      v-model:open="isProfileModalVisible"
      :footer="null"
      centered
      @cancel="handleCancel"
    >
      <div class="modal-header">
        <h2>个人中心</h2>
      </div>
      <div v-if="!userStore.isLoggedIn" class="not-logged-in">
        <p class="warning-message">您还没有登录哦</p>
        <a-button type="primary" @click="redirectToLogin">去登录</a-button>
      </div>
      <div v-else class="user-info">
        <p>用户名: <strong>{{ userStore.userInfo.name }}</strong></p>
        <p>用户编号: <strong>{{ userStore.userInfo.id }}</strong></p>
      </div>
    </a-modal>

    <a-modal
      v-model:open="isLogoutModalVisible"
      title="确认退出"
      centered
      @cancel="handleCancel"
      @ok="handleLogout"
    >
      <p>您确定要退出登录吗？</p>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { useNetworkStatus } from '@/composables/network';
import { HomeOutlined, DownOutlined } from '@ant-design/icons-vue';

const router = useRouter();
const userStore = useUserStore();
const { isOnline } = useNetworkStatus();

const isProfileModalVisible = ref(false);
const isLogoutModalVisible = ref(false);

const showProfile = () => {
  isProfileModalVisible.value = true;
};

const showLogoutConfirm = () => {
  isLogoutModalVisible.value = true;
};

const handleCancel = () => {
  isProfileModalVisible.value = false;
  isLogoutModalVisible.value = false;
};

const handleLogout = () => {
  userStore.logout();
  router.push('/');
  console.log('用户已退出登录');
  isLogoutModalVisible.value = false;
};

function redirectToLogin() {
  router.push('/login');
}

onMounted(() => {
  userStore.initializeUser();
});
</script>

<style scoped lang="less">
@import './index.less';

.modal-header {
  text-align: center;
  margin-bottom: 16px;
}

.modal-header h2 {
  margin: 0;
}

.user-info {
  text-align: center;
  margin-top: 16px;
}

.user-info p {
  margin: 4px 0;
  font-size: 16px;
}

.not-logged-in {
  text-align: center;
  padding: 20px;
}

.warning-message {
  color: red;
  font-size: 18px;
  margin-bottom: 15px;
}
</style>
